<html>
	<head>
		<meta http-equiv=Content-Type content="text/html;charset=utf-8">
		<script type="text/javascript" src="../js/jquery-2.0.2.min.js"></script>
		<style>
			body{-webkit-user-select: none;	}
			.notice-win{
				display:inline-block;
				width:295px;
				border:1px #49585f solid;
				position:absolute;
				margin:3px 3px 3px 0;
				left:0px;
				bottom:0px;
				border-radius:4px;
				font-size:9pt;
			}
			.notice-title{
				display:inline-block;
				border-top-left-radius:4px;
				border-top-right-radius:4px;
				width:290px;
				height:24px;
				line-height:24px;
				padding-left:5px;
				color:#7d7d7d;
				background:#f5f5f5;
				cursor: default;
			}
			.notice-content{
				display:inline-block;
				width:290px;
				padding:8px 0 8px 5px;
				background:#FFFFFF;
				border-bottom-left-radius:4px;
				border-bottom-right-radius:4px;
				cursor: default;
			}
			.notice-close{
				text-decoration:none;
				float:right;
				margin-right:5px;
				margin-top:2px;
				display:inline-block;
				width:16px;
				height:16px;
				outline:none;
				background: url("../imgs/icons.png") no-repeat -16px 0px;
			}
			.notice-close:hover{
				background: url("../imgs/icons.png") no-repeat -16px -16px;
			}
		</style>
		<script type="text/javascript">
			function showNotification(title,flag,html,delay){
				removeNotice(flag);
				//计算位置
				var ns = $(".notice-win");
				var bottom = 0;
				if(ns.length>0){
					var nn = $(ns.get(0));
					//for(;;){
					//	if(!nn.is(":animated"))
					//		break;
					//	_notifications_.sleep(100);
					//}
					bottom = pxToInt(nn.css("bottom")) + nn.height()+5;
				}
				var win = ["<div class='notice-win' id='"+flag+"' style='bottom:"+bottom+"px;'>",
					"<div class='notice-title'><label>",
					title,
					"</label><a href='javascript:void(0)' onclick='noticeClose(this)' class='notice-close'></a>",
					"</div>",
					"<div class='notice-content'>",
					html,
					"</div>",
					"</div>"
				];
				$("body").prepend(win.join(""));

				if(delay&&delay>0){
					var nn = $("#"+flag);
					setTimeout(function(){
						nn.slideUp(500,function(){
							removeNotice($(this).attr("id"));
						});
					},delay)
					//$("#"+flag).delay(delay).slideUp(500,function(){
					//	removeNotice($(this).attr("id"));
					//})
				}
			}
			
			function pxToInt(px){
				return parseInt(px.replace("px",""))
			}
			
			function removeNotice(flag){
				var nn = $("#"+flag);
				if(nn.length===0) return;
				var n_btm = pxToInt(nn.css("bottom"));
				nn.hide();
				var pns = nn.prevAll(".notice-win");
				for(var i=0;i<pns.length;i++){
					$(pns[i]).animate({bottom:n_btm},300);
					n_btm+=$(pns[i]).height()+5;
				}
				nn.remove();
			}
			
			function noticeClose(obj){
				removeNotice($(obj).parent().parent().attr("id"));	
			}
		</script>
	</head>
	<body>
	</body>
</html>